window.addEventListener('load', function() {
  let tbody = this.document.querySelector('tbody')
  // 打开添加学员模态框
  let btnopendialog = this.document.querySelector('.btnopendialog')
  // 新增学员的表单
  let form = document.querySelector('#addModal form')
  //获取弹框中的名字
  let name = document.querySelector('[name="name"]')
  //获取弹框中的年龄
  let age = document.querySelector('[name="age"]')
  //获取弹框中的组号
  let group = document.querySelector('[name="group"]')
  //获取弹框中的性别
  let sex = document.querySelectorAll('[name="sex"]')
  //获取弹框中的手机号
  let phone = document.querySelector('[name="phone"]')
  //获取弹框中的期望新资
  let salary = document.querySelector('[name="salary"]')
  //获取弹框中的实际新资
  let truesalary = document.querySelector('[name="truesalary"]')
  // 省下拉列表
  let provinceEle = document.querySelector('[name="province"]')
  // 市下拉列表
  let cityEle = document.querySelector('[name="city"]')
  // 区县下拉列表
  let countyEle = document.querySelector('[name="county"]')
  // 表单重置按钮
  let btnreset = document.querySelector('.btnreset')
  // 模态框的标题
  let addModalLabel = document.querySelector('#addModalLabel')
  // 模态框的确认按钮
  let btnconfirm = document.querySelector('.btnconfirm')

  // 1。数据渲染
  function init() {
    axios({
      url: '/student/list'
    }).then(res => {
      // console.log(res)
      let htmlStr = ''
      res.data.data.forEach(function(value, index) {
        htmlStr += `<tr>
                      <th scope="row">${index + 1}</th>
                      <td>${value.name}</td>
                      <td>${value.age}</td>
                      <td>${value.sex}</td>
                      <td>${value.group}</td>
                      <td>${value.phone}</td>
                      <td>${value.salary}</td>
                      <td>${value.truesalary}</td>
                      <td>${value.province + value.city + value.county}</td>
                      <td>
                        <button type="button" class="btn btn-primary btn-sm btnedit" data-id='${
                          value.id
                        }'>修改</button>
                        <button type="button" class="btn btn-danger btn-sm btndel" data-id='${
                          value.id
                        }'>删除</button>
                      </td>
                    </tr>`
      })
      tbody.innerHTML = htmlStr
    })
  }
  init()

  // 弹出新增学员模态框
  btnopendialog.addEventListener('click', function() {
    $('#addModal').modal('show')
    // 修改模态框中的标题和确认按钮的文本内容
    addModalLabel.innerText = '录入新学员'
    btnconfirm.innerText = '确认添加'
  })

  // 加载省的数据
  axios({
    url: '/geo/province'
  }).then(res => {
    let htmlStr = '<option selected value="">--省--</option>'
    res.data.forEach(function(value) {
      htmlStr += `<option value="${value}">${value}</option>`
    })
    provinceEle.innerHTML = htmlStr
  })

  // 实现省市级联：选择了某个省之后，需要加载这个省的所有市
  provinceEle.addEventListener('change', function() {
    // 获取省的名称
    let pname = provinceEle.value
    // 如果用户没有选择具体的省，则不进行后续的处理
    cityEle.innerHTML = '<option selected value="">--市--</option>'
    countyEle.innerHTML = '<option selected value="">--县--</option>'
    if (!pname) {
      // 重置市和区县的内容
      return
    }

    axios({
      url: '/geo/city',
      params: { pname }
    }).then(res => {
      let htmlStr = '<option selected value="">--市--</option>'
      res.data.forEach(function(value) {
        htmlStr += `<option value="${value}">${value}</option>`
      })
      cityEle.innerHTML = htmlStr
    })
  })

  // 实现市区级联：选择了某个市，加载这个市下面的区县
  cityEle.addEventListener('change', function() {
    let pname = provinceEle.value,
      cname = cityEle.value
    countyEle.innerHTML = '<option selected value="">--县--</option>'
    if (!cname) {
      return
    }
    axios({
      url: '/geo/county',
      params: {
        pname,
        cname
      }
    }).then(res => {
      let htmlStr = '<option selected value="">--县--</option>'
      res.data.forEach(function(value) {
        htmlStr += `<option value="${value}">${value}</option>`
      })
      countyEle.innerHTML = htmlStr
    })
  })

  // 添加用户输入的验证规则
  function student() {
    return {
      fields: {
        name: {
          validators: {
            notEmpty: {
              message: '姓名不能为空'
            },
            stringLength: {
              min: 2,
              max: 10,
              message: '姓名长度2~10位'
            }
          }
        },
        age: {
          validators: {
            notEmpty: {
              message: '年龄不能为空'
            },
            greaterThan: {
              value: 18,
              message: '年龄不能小于18岁'
            },
            lessThan: {
              value: 60,
              message: '年龄不能超过60岁'
            }
          }
        },
        sex: {
          validators: {
            choice: {
              min: 1,
              max: 1,
              message: '请选择性别'
            }
          }
        },
        group: {
          validators: {
            notEmpty: {
              message: '组号不能为空'
            },
            regexp: {
              regexp: /^\d{1,2}$/,
              message: '请选择有效的组号'
            }
          }
        },
        phone: {
          validators: {
            notEmpty: {
              message: '手机号不能为空'
            },
            regexp: {
              regexp: /^1\d{10}$/,
              message: '请填写有效的手机号'
            }
          }
        },
        salary: {
          validators: {
            notEmpty: {
              message: '实际薪资不能为空'
            },
            greaterThan: {
              value: 800,
              message: '期望薪资不能低于800'
            },
            lessThan: {
              value: 100000,
              message: '期望薪资不能高于100000'
            }
          }
        },
        truesalary: {
          validators: {
            notEmpty: {
              message: '实际薪资不能为空'
            },
            greaterThan: {
              value: 800,
              message: '实际薪资不能低于800'
            },
            lessThan: {
              value: 100000,
              message: '实际薪资不能高于100000'
            }
          }
        },
        province: {
          validators: {
            notEmpty: {
              message: '省份必填'
            }
          }
        },
        city: {
          validators: {
            notEmpty: {
              message: '市必填'
            }
          }
        },
        county: {
          validators: {
            notEmpty: {
              message: '县必填'
            }
          }
        }
      }
    }
  }

  // 实现新增 或 编辑
  let editid
  // 我们需要实现用户输入的验证，所以使用插件的方式绑定事件
  $('#addModal form')
    .bootstrapValidator(student())
    .on('success.form.bv', function(e) {
      e.preventDefault()
      $('#addModal form').data('bootstrapValidator', student())

      let formdata = new FormData(form)
      let data = {}
      formdata.forEach(function(value, key) {
        data[key] = value
      })
      // 判断当前操作是编辑还是新增
      if (addModalLabel.innerText === '录入新学员') {
        // 发起数据请求
        axios({
          url: '/student/add',
          method: 'post',
          data
        }).then(res => {
          console.log(res)
          if (res.data.code == 0) {
            toastr.success(res.data.message)
            $('#addModal').modal('hide')
            init()
            // 重置表单元素的值：只有click事件可以直接通过click方法触发，其它事件都不行
            btnreset.click()
            cityEle.innerHTML = '<option selected value="">--市--</option>'
            countyEle.innerHTML = '<option selected value="">--县--</option>'
          }
        })
      } else {
        // 在参数中追加数据id
        data.id = editid
        axios({
          url: '/student/update',
          method: 'put',
          data
        }).then(res => {
          console.log(res)
          if (res.data.code == 0) {
            toastr.success(res.data.message)
            $('#addModal').modal('hide')
            init()
            // 重置表单元素的值：只有click事件可以直接通过click方法触发，其它事件都不行
            btnreset.click()
            cityEle.innerHTML = '<option selected value="">--市--</option>'
            countyEle.innerHTML = '<option selected value="">--县--</option>'
          }
        })
      }
    })

  // 根据用户id删除用户数据
  tbody.addEventListener('click', function(e) {
    if (e.target.classList.contains('btndel')) {
      // 询问用户是否真的需要删除
      if (confirm('真的删除吗？')) {
        // 1.获取数据id
        let id = e.target.dataset.id
        // 2.发起ajax请求
        axios({
          url: '/student/delete',
          method: 'delete',
          params: { id }
        }).then(res => {
          console.log(res)
          if (res.data.code == 0) {
            toastr.success(res.data.message)
            init()
          } else {
            toastr.error(res.data.message)
          }
        })
      }
    }
  })

  // 单击列表中的 修改 按钮，弹出模态框，同时进行数据的回填
  tbody.addEventListener('click', function(e) {
    if (e.target.classList.contains('btnedit')) {
      // 修改模态框中的标题和确认按钮的文本内容
      addModalLabel.innerText = '编辑学员'
      btnconfirm.innerText = '确认编辑'
      // 进行数据的回填
      // 先获取数据id
      let id = e.target.dataset.id
      editid = id
      // 再根据数据id查询数据 -- 后台得有这个接口
      axios({
        url: '/student/one',
        params: { id }
      }).then(res => {
        console.log(res)
        let data = res.data.data
        // 1.常规表单元素赋值：对value赋值 (输入框，下拉列表)
        name.value = data.name
        age.value = data.age
        phone.value = data.phone
        salary.value = data.salary
        truesalary.value = data.truesalary
        // 2.根据值设置元素的状态： 单选，复选
        data.sex === '男' ? (sex[0].checked = true) : (sex[1].checked = true)
        // 3.下拉列表
        group.value = data.group
        provinceEle.value = data.province
        // 在赋值value的时候，它会找到value值对应的选项进行展示 ,如果找不到对应value值的选项，则显示 ‘’
        // 如果仅仅需要一个选项值，那么也可以为下拉列表设置innerHTML
        cityEle.innerHTML = `<option selected value="${data.city}">--${data.city}--</option>`
        countyEle.innerHTML = `<option selected value="${data.county}">--${data.county}--</option>`

        // 触发省的change事件
        // 1.创建一个事件对象 --针对于页面的元素添加事件
        let event = document.createEvent('HtmlEvents')
        // 2.进行事件的初始化
        event.initEvent('change', true, true)
        // 3.触发元素的事件
        provinceEle.dispatchEvent(event)
        setTimeout(() => {
          cityEle.value = data.city

          // 1.创建一个事件对象 --针对于页面的元素添加事件
          let ev = document.createEvent('HtmlEvents')
          // 2.进行事件的初始化
          ev.initEvent('change', true, true)
          // 3.触发元素的事件
          cityEle.dispatchEvent(ev)
          setTimeout(() => {
            countyEle.value = data.county
          }, 500)
        }, 500)
      })
      // 弹出模态框
      $('#addModal').modal('show')
    }
  })

  // 实现成绩的录入和修改
  tbody.addEventListener('click', function(e) {
    if (e.target.className == 'score') {
      // 当前单元格
      let td = e.target
      // 先将值存储
      let score = td.innerText
      // 判断当前单元格是否有输入框了
      if (!td.querySelector('input')) {
        // 清空单元格
        td.innerText = ''
        // 创建一个input输入框
        let input = document.createElement('input')
        // 设置单元格的样式
        input.style.outline = 'none'
        input.style.border = 'none'
        input.style.background = 'transparent'
        input.style.textAlign = 'center'

        // 追加到单元格
        td.appendChild(input)
        // 将td的值填充到input输入框中
        input.value = score
        // // 让输入框的内容选中
        input.select()

        // 为输入框添加失焦事件
        input.addEventListener('blur', function() {
          td.innerText = score
        })

        // 为输入框添加一个按键事件，在按下enter键的时候进行录入或修改操作
        input.addEventListener('keyup', function(e) {
          if (e.key == 'Enter') {
            axios({
              url: '/score/entry',
              method: 'post',
              data: {
                stu_id: td.parentNode.dataset.id, // 当前成绩所属学员的id
                batch: td.dataset.batch, // 第几次
                score: input.value // 成绩，来自于输入框
              }
            }).then(res => {
              toastr.success('成绩录入功修改成功')
              // 先清空td的html结构
              td.innerHTML = ''
              // 再为td设置文本内容
              td.innerText = input.value
              // 将input移除
              input.remove()
            })
          }
        })
      }
    }
  })
})
